<template>
  <div class="content">
    <div class="container" ref="container" @mousemove="onDrag" @mouseup="onDragEnd" @mouseleave="onDragEnd">
      <div v-for="(width, index) in widths" :key="index" class="draggable" :style="{ width: width + '%' }"
        @mousedown="onDragStart(index, $event)">
        {{ width }}
        <!-- 拖拽条，用于改变div的宽度 -->
        <!-- <div class="resizer" v-if="index < widths.length - 1" @mousedown.stop.prevent="onResizerStart(index, $event)"></div> -->
      </div>
    </div>
    <div class="btn">
      <div>剩余占比：{{ reversePolish }}</div>
      <el-button :disabled="!reversePolish" @click="widths.push(reversePolish)">添加区域</el-button>
    </div>
  </div>
</template>  
  
<script>
export default {
  name: 'ResizableDivs',
  // props: {
  //   numDivs: {
  //     type: Number,
  //     default: 1,
  //     validator: (value) => value > 0
  //   }
  // },
  data() {
    return {
      dragging: false,
      dragIndex: null,
      startX: 0,
      startWidth: 0,
      widths: [15, 20, 30], // 初始化每个div的宽度占比  
    };
  },
  computed: {
    reversePolish() {
      let sum = this.widths.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
      let num = 100 - sum
      return num ? num : 0
    }
  },
  methods: {
    onDragStart(index, event) {
      this.dragIndex = index;
      this.startX = event.clientX;
      this.startWidth = this.widths[index];
      this.dragging = true;
    },
    onResizerStart(index, event) {
      this.dragIndex = index;
      this.startX = event.clientX;
      this.startWidth = this.widths[index];
      this.dragging = true;
    },
    onDrag(event) {
      if (!this.dragging) return;
      const containerRect = this.$refs.container.getBoundingClientRect();
      const deltaX = event.clientX - this.startX;
      let newWidth = this.startWidth + (deltaX / containerRect.width) * 100;
      // 确保宽度在合理范围内  
      newWidth = Math.max(1, Math.min(newWidth, 100 - this.getWidthsSumExcluding(this.dragIndex)));

      this.widths = this.updateWidths(this.dragIndex, newWidth);
      console.log(this.widths)
    },
    onDragEnd() {
      this.dragging = false;
    },
    getWidthsSumExcluding(excludeIndex) {
      return this.widths.reduce((sum, width, index) => {
        return sum + (index !== excludeIndex ? Math.floor(width) : 0);
      }, 0);
    },
    updateWidths(index, newWidth) {
      return this.widths.map((width, i) => (i === index ? Math.floor(newWidth) : Math.floor(width)));
    }
  }
};  
</script>  
  
<style scoped>  .content {
    width: 100%;
  }

  .btn {
    margin: 10px;
  }

  .container {
    display: flex;
    width: 100%;
    height: 100%;
    transition: all 0.1s;
  }

  .draggable {
    height: 50px;
    background-color: #f0f0f0;
    border: 1px solid #cecece;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    position: relative;
  }

  .resizer {
    cursor: col-resize;
    width: 10px;
    height: 100%;
    background-color: #ccc;
    position: absolute;
    top: 0;
    right: -5px;
    z-index: 1;
  }
</style>